<template>
  <section>
    <h3>安全中心</h3>
    <br>
    <h3>更改密码</h3>
    <el-form label-width="120px" :model="changePassword" :rules="rule" ref="changePassword" class="resetForm">
      <el-form-item label="输入原密码" prop="passwordOld">
        <el-input v-model="changePassword.passwordOld" type="password"></el-input>
      </el-form-item>
      <el-form-item label="输入新密码" prop="password">
        <el-input v-model="changePassword.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="passwordConfirm">
        <el-input v-model="changePassword.passwordConfirm" type="password"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button @click="change('changePassword')" v-loading="loading">提交</el-button>
      </el-form-item>

    </el-form>

    <h3>密码找回</h3>
    <el-form label-width="120px" :model="forgetPassword" :rules="rule2" ref="forgetPassword" class="resetForm">
      <el-form-item label="输入邮箱" prop="email">
        <div>
          <el-input v-model="forgetPassword.email" type="email"></el-input>
          <el-button style="position: absolute;margin-top: -36px;right: 0" @click="getRandom">获取验证码</el-button>
        </div>
      </el-form-item>
      <el-form-item label="验证码" prop="random">
        <el-input v-model="forgetPassword.random" type="email"></el-input>
      </el-form-item>
      <el-form-item label="输入新密码" prop="password">
        <el-input v-model="forgetPassword.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="passwordConfirm">
        <el-input v-model="forgetPassword.passwordConfirm" type="password"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button @click="forget('forgetPassword')" v-loading="loading2">提交</el-button>
      </el-form-item>
    </el-form>

  </section>
</template>
<script>
  /* eslint-disable spaced-comment */
  import { SetPassword, ResetPassword, ConfirmEmail } from '../../public/api'

  export default {
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.changePassword.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.forgetPassword.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        loading: false,
        loading2: false,
        changePassword: {
          passwordOld: '',
          password: '',
          passwordConfirm: ''
        },
        forgetPassword: {
          email: '',
          password: '',
          passwordConfirm: '',
          random: ''
        },
        rule: {
          passwordOld: [
            {required: true, message: '请输入当前原始密码', trigger: 'blur'},
            {min: 1, max: 20, message: '密码长度不正确', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
            // {validator: validatePass, trigger: 'blur'}
          ],
          passwordConfirm: [
            {required: true, message: '请确认新密码', trigger: 'blur'},
            {validator: validatePass, trigger: 'blur'}
          ]
        },
        rule2: {
          email: [
            {required: true, message: '请输入当注册时邮箱', trigger: 'blur'}
          ],
          random: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
            // {validator: validatePass, trigger: 'blur'}
          ],
          passwordConfirm: [
            {required: true, message: '请确认新密码', trigger: 'blur'},
            {validator: validatePass2, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      change (formName) {
        this.loading = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            SetPassword({
              password: this.changePassword.passwordOld,
              newPassword: this.changePassword.password
            }).then(
              data => {
                if (data.status) {
                  this.$message.success('操作成功')
                } else {
                  this.$message.error(data.msg)
                }
                this.$refs[formName].resetFields()
                this.loading = false
              }
            ).catch()
          } else {
            console.log('error submit!!')
            this.loading = false
            return false
          }
        })
      },
      forget (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading2 = true
            ResetPassword({
              random: this.forgetPassword.random,
              email: this.forgetPassword.email,
              newPassword: this.forgetPassword.password
            }).then(
              data => {
                if (data.status) {
                  this.$message.success('操作成功')
                } else {
                  this.$message.error(data.msg)
                }
                this.$refs[formName].resetFields()
                this.loading2 = false
              }
            ).catch()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getRandom () {
        ConfirmEmail({email: this.forgetPassword.email}).then(
          data => {
            if (data.status) {
              this.$message.success('获取验证码成功，邮件已经发送')
            }
          }
        ).catch()
      }
    }
  }
</script>
<style>
  .resetForm {
    border: 1px solid black;
    /*padding: 10px;*/
  }

  .resetForm .el-form-item {
    margin: 20px;
  }
</style>
